import React, { useState } from 'react';
import { Eye, Save, RotateCcw, FileText, Image, Video, Music, Code, Archive, Settings } from 'lucide-react';
import MenuToggle from '../components/MenuToggle';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Slider } from '@/components/ui/slider';

const PreviewConfig = ({ toggleSidebar }) => {
  // 图片预览配置
  const [imageConfig, setImageConfig] = useState({
    enablePreview: true,
    maxSize: 50, // MB
    quality: [80],
    enableThumbnail: true,
    thumbnailSize: '200x200',
    supportedFormats: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'],
    enableZoom: true,
    enableRotation: true,
    enableFullscreen: true
  });

  // 视频预览配置
  const [videoConfig, setVideoConfig] = useState({
    enablePreview: true,
    maxSize: 500, // MB
    supportedFormats: ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'],
    enableAutoplay: false,
    enableControls: true,
    previewDuration: 30, // seconds
    generateThumbnail: true,
    thumbnailCount: 3
  });

  // 音频预览配置
  const [audioConfig, setAudioConfig] = useState({
    enablePreview: true,
    maxSize: 100, // MB
    supportedFormats: ['mp3', 'wav', 'flac', 'aac', 'ogg'],
    enableAutoplay: false,
    showWaveform: true,
    previewDuration: 60 // seconds
  });

  // 文档预览配置
  const [documentConfig, setDocumentConfig] = useState({
    enablePreview: true,
    maxSize: 100, // MB
    supportedFormats: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt'],
    enableTextSearch: true,
    maxPages: 50,
    enableDownload: true,
    enablePrint: false
  });

  // 代码预览配置
  const [codeConfig, setCodeConfig] = useState({
    enablePreview: true,
    maxSize: 10, // MB
    supportedFormats: ['js', 'jsx', 'ts', 'tsx', 'html', 'css', 'json', 'xml', 'py', 'java', 'cpp', 'c'],
    enableSyntaxHighlight: true,
    theme: 'vs-dark',
    showLineNumbers: true,
    enableWordWrap: true,
    fontSize: [14]
  });

  // 通用预览配置
  const [generalConfig, setGeneralConfig] = useState({
    enableCache: true,
    cacheExpiration: 24, // hours
    maxCacheSize: 1024, // MB
    enableLazyLoad: true,
    previewTimeout: 30, // seconds
    enableErrorFallback: true,
    showFileInfo: true
  });

  const imageSizeOptions = [
    { value: '100x100', label: '100x100' },
    { value: '150x150', label: '150x150' },
    { value: '200x200', label: '200x200' },
    { value: '300x300', label: '300x300' }
  ];

  const codeThemes = [
    { value: 'vs-light', label: '浅色主题' },
    { value: 'vs-dark', label: '深色主题' },
    { value: 'github', label: 'GitHub' },
    { value: 'monokai', label: 'Monokai' }
  ];

  const handleSave = () => {
    const allConfig = {
      image: imageConfig,
      video: videoConfig,
      audio: audioConfig,
      document: documentConfig,
      code: codeConfig,
      general: generalConfig
    };
    
    console.log('保存预览配置:', allConfig);
    alert('预览配置已保存');
  };

  const handleReset = () => {
    if (confirm('确定要重置所有预览配置到默认值吗？')) {
      setImageConfig({
        enablePreview: true,
        maxSize: 50,
        quality: [80],
        enableThumbnail: true,
        thumbnailSize: '200x200',
        supportedFormats: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'],
        enableZoom: true,
        enableRotation: true,
        enableFullscreen: true
      });
      
      setVideoConfig({
        enablePreview: true,
        maxSize: 500,
        supportedFormats: ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'],
        enableAutoplay: false,
        enableControls: true,
        previewDuration: 30,
        generateThumbnail: true,
        thumbnailCount: 3
      });
      
      setAudioConfig({
        enablePreview: true,
        maxSize: 100,
        supportedFormats: ['mp3', 'wav', 'flac', 'aac', 'ogg'],
        enableAutoplay: false,
        showWaveform: true,
        previewDuration: 60
      });
      
      setDocumentConfig({
        enablePreview: true,
        maxSize: 100,
        supportedFormats: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt'],
        enableTextSearch: true,
        maxPages: 50,
        enableDownload: true,
        enablePrint: false
      });
      
      setCodeConfig({
        enablePreview: true,
        maxSize: 10,
        supportedFormats: ['js', 'jsx', 'ts', 'tsx', 'html', 'css', 'json', 'xml', 'py', 'java', 'cpp', 'c'],
        enableSyntaxHighlight: true,
        theme: 'vs-dark',
        showLineNumbers: true,
        enableWordWrap: true,
        fontSize: [14]
      });
      
      setGeneralConfig({
        enableCache: true,
        cacheExpiration: 24,
        maxCacheSize: 1024,
        enableLazyLoad: true,
        previewTimeout: 30,
        enableErrorFallback: true,
        showFileInfo: true
      });
    }
  };

  const formatList = (formats) => {
    return formats.map(format => `.${format}`).join(', ');
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="mt-3">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
                  <Eye className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    预览配置
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    配置文件预览功能和参数设置
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <div className="flex items-center space-x-3">
              <Button variant="outline" onClick={handleReset}>
                <RotateCcw className="w-4 h-4 mr-2" />
                重置配置
              </Button>
              <Button onClick={handleSave} className="bg-primary hover:bg-primary-600">
                <Save className="w-4 h-4 mr-2" />
                保存配置
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        <Tabs defaultValue="image" className="w-full">
          <TabsList className="grid w-full grid-cols-6">
            <TabsTrigger value="image">图片</TabsTrigger>
            <TabsTrigger value="video">视频</TabsTrigger>
            <TabsTrigger value="audio">音频</TabsTrigger>
            <TabsTrigger value="document">文档</TabsTrigger>
            <TabsTrigger value="code">代码</TabsTrigger>
            <TabsTrigger value="general">通用</TabsTrigger>
          </TabsList>

          {/* 图片预览配置 */}
          <TabsContent value="image" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Image className="w-5 h-5" />
                  <span>图片预览配置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="image-preview">启用图片预览</Label>
                    <p className="text-sm text-material-grey-600">允许在线预览图片文件</p>
                  </div>
                  <Switch
                    id="image-preview"
                    checked={imageConfig.enablePreview}
                    onCheckedChange={(checked) => setImageConfig(prev => ({ ...prev, enablePreview: checked }))}
                  />
                </div>

                {imageConfig.enablePreview && (
                  <div className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="image-maxSize">最大文件大小 (MB)</Label>
                        <Input
                          id="image-maxSize"
                          type="number"
                          min="1"
                          max="1000"
                          value={imageConfig.maxSize}
                          onChange={(e) => setImageConfig(prev => ({ ...prev, maxSize: parseInt(e.target.value) || 50 }))}
                        />
                      </div>

                      <div>
                        <Label htmlFor="image-thumbnailSize">缩略图尺寸</Label>
                        <Select value={imageConfig.thumbnailSize} onValueChange={(value) => setImageConfig(prev => ({ ...prev, thumbnailSize: value }))}>
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            {imageSizeOptions.map(option => (
                              <SelectItem key={option.value} value={option.value}>
                                {option.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

                    <div>
                      <Label>图片质量: {imageConfig.quality[0]}%</Label>
                      <Slider
                        min={10}
                        max={100}
                        step={10}
                        value={imageConfig.quality}
                        onValueChange={(value) => setImageConfig(prev => ({ ...prev, quality: value }))}
                        className="mt-2"
                      />
                    </div>

                    <div className="space-y-3">
                      <div className="flex items-center justify-between">
                        <Label htmlFor="image-thumbnail">生成缩略图</Label>
                        <Switch
                          id="image-thumbnail"
                          checked={imageConfig.enableThumbnail}
                          onCheckedChange={(checked) => setImageConfig(prev => ({ ...prev, enableThumbnail: checked }))}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <Label htmlFor="image-zoom">启用缩放功能</Label>
                        <Switch
                          id="image-zoom"
                          checked={imageConfig.enableZoom}
                          onCheckedChange={(checked) => setImageConfig(prev => ({ ...prev, enableZoom: checked }))}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <Label htmlFor="image-rotation">启用旋转功能</Label>
                        <Switch
                          id="image-rotation"
                          checked={imageConfig.enableRotation}
                          onCheckedChange={(checked) => setImageConfig(prev => ({ ...prev, enableRotation: checked }))}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <Label htmlFor="image-fullscreen">启用全屏预览</Label>
                        <Switch
                          id="image-fullscreen"
                          checked={imageConfig.enableFullscreen}
                          onCheckedChange={(checked) => setImageConfig(prev => ({ ...prev, enableFullscreen: checked }))}
                        />
                      </div>
                    </div>

                    <div>
                      <Label>支持的格式</Label>
                      <div className="mt-2 p-3 bg-material-grey-50 rounded-lg">
                        <p className="text-sm text-material-grey-700">
                          {formatList(imageConfig.supportedFormats)}
                        </p>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          {/* 视频预览配置 */}
          <TabsContent value="video" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Video className="w-5 h-5" />
                  <span>视频预览配置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="video-preview">启用视频预览</Label>
                    <p className="text-sm text-material-grey-600">允许在线播放视频文件</p>
                  </div>
                  <Switch
                    id="video-preview"
                    checked={videoConfig.enablePreview}
                    onCheckedChange={(checked) => setVideoConfig(prev => ({ ...prev, enablePreview: checked }))}
                  />
                </div>

                {videoConfig.enablePreview && (
                  <div className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="video-maxSize">最大文件大小 (MB)</Label>
                        <Input
                          id="video-maxSize"
                          type="number"
                          min="1"
                          max="5000"
                          value={videoConfig.maxSize}
                          onChange={(e) => setVideoConfig(prev => ({ ...prev, maxSize: parseInt(e.target.value) || 500 }))}
                        />
                      </div>

                      <div>
                        <Label htmlFor="video-duration">预览时长 (秒)</Label>
                        <Input
                          id="video-duration"
                          type="number"
                          min="10"
                          max="300"
                          value={videoConfig.previewDuration}
                          onChange={(e) => setVideoConfig(prev => ({ ...prev, previewDuration: parseInt(e.target.value) || 30 }))}
                        />
                      </div>

                      <div>
                        <Label htmlFor="video-thumbnails">缩略图数量</Label>
                        <Input
                          id="video-thumbnails"
                          type="number"
                          min="1"
                          max="10"
                          value={videoConfig.thumbnailCount}
                          onChange={(e) => setVideoConfig(prev => ({ ...prev, thumbnailCount: parseInt(e.target.value) || 3 }))}
                        />
                      </div>
                    </div>

                    <div className="space-y-3">
                      <div className="flex items-center justify-between">
                        <Label htmlFor="video-autoplay">自动播放</Label>
                        <Switch
                          id="video-autoplay"
                          checked={videoConfig.enableAutoplay}
                          onCheckedChange={(checked) => setVideoConfig(prev => ({ ...prev, enableAutoplay: checked }))}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <Label htmlFor="video-controls">显示控制栏</Label>
                        <Switch
                          id="video-controls"
                          checked={videoConfig.enableControls}
                          onCheckedChange={(checked) => setVideoConfig(prev => ({ ...prev, enableControls: checked }))}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <Label htmlFor="video-thumbnail-gen">生成缩略图</Label>
                        <Switch
                          id="video-thumbnail-gen"
                          checked={videoConfig.generateThumbnail}
                          onCheckedChange={(checked) => setVideoConfig(prev => ({ ...prev, generateThumbnail: checked }))}
                        />
                      </div>
                    </div>

                    <div>
                      <Label>支持的格式</Label>
                      <div className="mt-2 p-3 bg-material-grey-50 rounded-lg">
                        <p className="text-sm text-material-grey-700">
                          {formatList(videoConfig.supportedFormats)}
                        </p>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          {/* 音频预览配置 */}
          <TabsContent value="audio" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Music className="w-5 h-5" />
                  <span>音频预览配置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="audio-preview">启用音频预览</Label>
                    <p className="text-sm text-material-grey-600">允许在线播放音频文件</p>
                  </div>
                  <Switch
                    id="audio-preview"
                    checked={audioConfig.enablePreview}
                    onCheckedChange={(checked) => setAudioConfig(prev => ({ ...prev, enablePreview: checked }))}
                  />
                </div>

                {audioConfig.enablePreview && (
                  <div className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="audio-maxSize">最大文件大小 (MB)</Label>
                        <Input
                          id="audio-maxSize"
                          type="number"
                          min="1"
                          max="1000"
                          value={audioConfig.maxSize}
                          onChange={(e) => setAudioConfig(prev => ({ ...prev, maxSize: parseInt(e.target.value) || 100 }))}
                        />
                      </div>

                      <div>
                        <Label htmlFor="audio-duration">预览时长 (秒)</Label>
                        <Input
                          id="audio-duration"
                          type="number"
                          min="10"
                          max="600"
                          value={audioConfig.previewDuration}
                          onChange={(e) => setAudioConfig(prev => ({ ...prev, previewDuration: parseInt(e.target.value) || 60 }))}
                        />
                      </div>
                    </div>

                    <div className="space-y-3">
                      <div className="flex items-center justify-between">
                        <Label htmlFor="audio-autoplay">自动播放</Label>
                        <Switch
                          id="audio-autoplay"
                          checked={audioConfig.enableAutoplay}
                          onCheckedChange={(checked) => setAudioConfig(prev => ({ ...prev, enableAutoplay: checked }))}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <Label htmlFor="audio-waveform">显示波形图</Label>
                        <Switch
                          id="audio-waveform"
                          checked={audioConfig.showWaveform}
                          onCheckedChange={(checked) => setAudioConfig(prev => ({ ...prev, showWaveform: checked }))}
                        />
                      </div>
                    </div>

                    <div>
                      <Label>支持的格式</Label>
                      <div className="mt-2 p-3 bg-material-grey-50 rounded-lg">
                        <p className="text-sm text-material-grey-700">
                          {formatList(audioConfig.supportedFormats)}
                        </p>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          {/* 文档预览配置 */}
          <TabsContent value="document" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <FileText className="w-5 h-5" />
                  <span>文档预览配置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="document-preview">启用文档预览</Label>
                    <p className="text-sm text-material-grey-600">允许在线预览文档文件</p>
                  </div>
                  <Switch
                    id="document-preview"
                    checked={documentConfig.enablePreview}
                    onCheckedChange={(checked) => setDocumentConfig(prev => ({ ...prev, enablePreview: checked }))}
                  />
                </div>

                {documentConfig.enablePreview && (
                  <div className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="document-maxSize">最大文件大小 (MB)</Label>
                        <Input
                          id="document-maxSize"
                          type="number"
                          min="1"
                          max="1000"
                          value={documentConfig.maxSize}
                          onChange={(e) => setDocumentConfig(prev => ({ ...prev, maxSize: parseInt(e.target.value) || 100 }))}
                        />
                      </div>

                      <div>
                        <Label htmlFor="document-maxPages">最大页数</Label>
                        <Input
                          id="document-maxPages"
                          type="number"
                          min="1"
                          max="1000"
                          value={documentConfig.maxPages}
                          onChange={(e) => setDocumentConfig(prev => ({ ...prev, maxPages: parseInt(e.target.value) || 50 }))}
                        />
                      </div>
                    </div>

                    <div className="space-y-3">
                      <div className="flex items-center justify-between">
                        <Label htmlFor="document-search">启用文本搜索</Label>
                        <Switch
                          id="document-search"
                          checked={documentConfig.enableTextSearch}
                          onCheckedChange={(checked) => setDocumentConfig(prev => ({ ...prev, enableTextSearch: checked }))}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <Label htmlFor="document-download">允许下载</Label>
                        <Switch
                          id="document-download"
                          checked={documentConfig.enableDownload}
                          onCheckedChange={(checked) => setDocumentConfig(prev => ({ ...prev, enableDownload: checked }))}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <Label htmlFor="document-print">允许打印</Label>
                        <Switch
                          id="document-print"
                          checked={documentConfig.enablePrint}
                          onCheckedChange={(checked) => setDocumentConfig(prev => ({ ...prev, enablePrint: checked }))}
                        />
                      </div>
                    </div>

                    <div>
                      <Label>支持的格式</Label>
                      <div className="mt-2 p-3 bg-material-grey-50 rounded-lg">
                        <p className="text-sm text-material-grey-700">
                          {formatList(documentConfig.supportedFormats)}
                        </p>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          {/* 代码预览配置 */}
          <TabsContent value="code" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Code className="w-5 h-5" />
                  <span>代码预览配置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="flex items-center justify-between">
                  <div>
                    <Label htmlFor="code-preview">启用代码预览</Label>
                    <p className="text-sm text-material-grey-600">允许在线预览代码文件</p>
                  </div>
                  <Switch
                    id="code-preview"
                    checked={codeConfig.enablePreview}
                    onCheckedChange={(checked) => setCodeConfig(prev => ({ ...prev, enablePreview: checked }))}
                  />
                </div>

                {codeConfig.enablePreview && (
                  <div className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="code-maxSize">最大文件大小 (MB)</Label>
                        <Input
                          id="code-maxSize"
                          type="number"
                          min="1"
                          max="100"
                          value={codeConfig.maxSize}
                          onChange={(e) => setCodeConfig(prev => ({ ...prev, maxSize: parseInt(e.target.value) || 10 }))}
                        />
                      </div>

                      <div>
                        <Label htmlFor="code-theme">编辑器主题</Label>
                        <Select value={codeConfig.theme} onValueChange={(value) => setCodeConfig(prev => ({ ...prev, theme: value }))}>
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            {codeThemes.map(theme => (
                              <SelectItem key={theme.value} value={theme.value}>
                                {theme.label}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

                    <div>
                      <Label>字体大小: {codeConfig.fontSize[0]}px</Label>
                      <Slider
                        min={10}
                        max={24}
                        step={1}
                        value={codeConfig.fontSize}
                        onValueChange={(value) => setCodeConfig(prev => ({ ...prev, fontSize: value }))}
                        className="mt-2"
                      />
                    </div>

                    <div className="space-y-3">
                      <div className="flex items-center justify-between">
                        <Label htmlFor="code-highlight">语法高亮</Label>
                        <Switch
                          id="code-highlight"
                          checked={codeConfig.enableSyntaxHighlight}
                          onCheckedChange={(checked) => setCodeConfig(prev => ({ ...prev, enableSyntaxHighlight: checked }))}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <Label htmlFor="code-lineNumbers">显示行号</Label>
                        <Switch
                          id="code-lineNumbers"
                          checked={codeConfig.showLineNumbers}
                          onCheckedChange={(checked) => setCodeConfig(prev => ({ ...prev, showLineNumbers: checked }))}
                        />
                      </div>

                      <div className="flex items-center justify-between">
                        <Label htmlFor="code-wordWrap">自动换行</Label>
                        <Switch
                          id="code-wordWrap"
                          checked={codeConfig.enableWordWrap}
                          onCheckedChange={(checked) => setCodeConfig(prev => ({ ...prev, enableWordWrap: checked }))}
                        />
                      </div>
                    </div>

                    <div>
                      <Label>支持的格式</Label>
                      <div className="mt-2 p-3 bg-material-grey-50 rounded-lg">
                        <p className="text-sm text-material-grey-700">
                          {formatList(codeConfig.supportedFormats)}
                        </p>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          {/* 通用配置 */}
          <TabsContent value="general" className="mt-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Settings className="w-5 h-5" />
                  <span>通用预览配置</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <Label htmlFor="general-cacheExpiration">缓存过期时间 (小时)</Label>
                    <Input
                      id="general-cacheExpiration"
                      type="number"
                      min="1"
                      max="168"
                      value={generalConfig.cacheExpiration}
                      onChange={(e) => setGeneralConfig(prev => ({ ...prev, cacheExpiration: parseInt(e.target.value) || 24 }))}
                    />
                  </div>

                  <div>
                    <Label htmlFor="general-maxCacheSize">最大缓存大小 (MB)</Label>
                    <Input
                      id="general-maxCacheSize"
                      type="number"
                      min="100"
                      max="10240"
                      value={generalConfig.maxCacheSize}
                      onChange={(e) => setGeneralConfig(prev => ({ ...prev, maxCacheSize: parseInt(e.target.value) || 1024 }))}
                    />
                  </div>

                  <div>
                    <Label htmlFor="general-timeout">预览超时时间 (秒)</Label>
                    <Input
                      id="general-timeout"
                      type="number"
                      min="5"
                      max="300"
                      value={generalConfig.previewTimeout}
                      onChange={(e) => setGeneralConfig(prev => ({ ...prev, previewTimeout: parseInt(e.target.value) || 30 }))}
                    />
                  </div>
                </div>

                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="general-cache">启用预览缓存</Label>
                      <p className="text-sm text-material-grey-600">缓存预览结果以提高性能</p>
                    </div>
                    <Switch
                      id="general-cache"
                      checked={generalConfig.enableCache}
                      onCheckedChange={(checked) => setGeneralConfig(prev => ({ ...prev, enableCache: checked }))}
                    />
                  </div>

                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="general-lazyLoad">启用懒加载</Label>
                      <p className="text-sm text-material-grey-600">按需加载预览内容</p>
                    </div>
                    <Switch
                      id="general-lazyLoad"
                      checked={generalConfig.enableLazyLoad}
                      onCheckedChange={(checked) => setGeneralConfig(prev => ({ ...prev, enableLazyLoad: checked }))}
                    />
                  </div>

                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="general-errorFallback">启用错误回退</Label>
                      <p className="text-sm text-material-grey-600">预览失败时显示备用内容</p>
                    </div>
                    <Switch
                      id="general-errorFallback"
                      checked={generalConfig.enableErrorFallback}
                      onCheckedChange={(checked) => setGeneralConfig(prev => ({ ...prev, enableErrorFallback: checked }))}
                    />
                  </div>

                  <div className="flex items-center justify-between">
                    <div>
                      <Label htmlFor="general-fileInfo">显示文件信息</Label>
                      <p className="text-sm text-material-grey-600">在预览时显示文件详细信息</p>
                    </div>
                    <Switch
                      id="general-fileInfo"
                      checked={generalConfig.showFileInfo}
                      onCheckedChange={(checked) => setGeneralConfig(prev => ({ ...prev, showFileInfo: checked }))}
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </>
  );
};

export default PreviewConfig;
